<template>
	
		<div class="userlist">
			<ul id="user">
				<li v-for="(item,index) in userlist" @click="chooseUser(index)" :key="'userlist'+index">
					<img v-if="item.gender=='男'" src="../assets/img/man.png" />
					<img v-else src="../assets/img/woman.png" />
					<h3 style="display: inline-block; margin-left: 50px; ">{{item.username}}</h3>

				</li>
			</ul>
		</div>
	

</template>

<script>
	import axios from "axios";
	import Vue from "vue";
	import Cookies from 'js-cookie'

	Vue.use(Cookies);
	Vue.prototype.axios = axios;
	export default {
		data() {
			return {
				province: "",
				showhiden: false,
				userlist: []
			}
		},
		
		mounted() {
			var server = this.$myConfig.server
			//this.Cookie.setCookie(JSON.parse("云南"),10);
			this.province = Cookies.get('province');
			if(this.province==null){
				this.$message.error("由于您没有登录所以不会有附近的人数据")
			}
			axios.get( server+"/nearBy/nearByUser", {
				params: {
					province: this.province
				}
			}).then((response) => {
				if (response.data.status == 1) {
					console.log(response.data);
					for (var i = 0; i < response.data.data.length; i++) {

						this.userlist.push({
							username: response.data.data[i].username,
							gender: response.data.data[i].gender
						})

					}
					console.log(this.userlist);
				} else {
					alert("获取数据失败");
				}
			});
		},

		methods: {
			display: function() {
				this.showhiden = !this.showhiden;
			},
			chooseUser: function(index) {
				//将选择用户的事件触发，发送给到父元素
				this.$emit('chooseuser', index)
			}
		},
	}
</script>

<style scoped>
	.userlist {}

	.userlist ul li {
		margin-bottom: 30px;
		display: flex;
	}

	.userlist ul li:hover {
		background: pink;
	}

	.userlist ul li img {
		width: 80px;
		height: 80px;
	}

	.redbg {
		background: pink;
	}
</style>
